<template>
    <div>
        <mu-tabs inverse>
            <mu-tab>列表配置</mu-tab>
        </mu-tabs>
        <div>
            <Draggable class="flex-start flex-wrap" v-model="insideValue" @update="update">
                <div class="flrc bdda padr20" v-for="(row,index) in insideValue" :key="row.name">
                    <div style="width: 120px;" class="tar fwb">{{row.title}}:</div>
                    <div style="width: 300px;" class="tac">
                        <mu-radio v-model="row.align" @change="v=>setV(index,'align',v)" class="marl5" label="左对齐"
                                  value="left"></mu-radio>
                        <mu-radio v-model="row.align" @change="v=>setV(index,'align',v)" class="marl5" label="居中对齐"
                                  value="center"></mu-radio>
                        <mu-radio v-model="row.align" @change="v=>setV(index,'align',v)" class="marl5" label="右对齐"
                                  value="right"></mu-radio>
                    </div>
                    <div style="width: 150px;" class="tac padt5">
                        <mu-text-field @focus="$event.target.select()" style="width: 130px;" type="number" @change="v=>setV(index,'width',v*1)"
                                       :value="row.width">
                            <mu-button small icon slot="prepend" @click="red(row.name)">
                                <mu-icon value="remove_circle"></mu-icon>
                            </mu-button>
                            <mu-button small icon slot="append" @click="add(row.name)">
                                <mu-icon value="add_circle"></mu-icon>
                            </mu-button>
                        </mu-text-field>

                    </div>
                    <div class=" padl10 padr10">
                        <mu-button icon @click="moveLeft(index)">
                            <mu-icon value="first_page"></mu-icon>
                        </mu-button>
                        <mu-button icon @click="moveRight(index)">
                            <mu-icon value="last_page"></mu-icon>
                        </mu-button>
                    </div>
                    <div>
                        <mu-switch @change="v=>setV(index,'show',v)" v-model="row.show" label="显示"></mu-switch>
                    </div>
                    <div class="flex1"></div>
                </div>
            </Draggable>
        </div>
        <div class="pad20 bdtso mart20">
            <mu-button class="marr10" color="primary" @click="restData">重置数据</mu-button>
            <mu-button class="marr10" color="primary" @click="clearCache">清理缓存</mu-button>
        </div>
    </div>

</template>

<script>
    import Draggable from "vuedraggable";

    export default {
        name: "EzTableHeaderManager",
        components: {
            Draggable
        },
        props: {
            value: [],
            org: [],
            cached: {
                type: Boolean,
                default() {
                    return false
                }
            },
            cacheKey: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                insideValue: [],
                curTab:"main",
            }
        },
        methods: {
            add(rowName) {
                for (let index in this.insideValue) {
                    let row = this.insideValue[index]
                    if (row.name === rowName) {
                        this.setV(index, "width", this.insideValue[index].width + 10)
                    }
                }

            },
            red(rowName) {
                for (let index in this.insideValue) {
                    let row = this.insideValue[index]
                    if (row.name === rowName) {
                        let v = this.insideValue[index].width - 10
                        if (v < 0) v = 0
                        this.setV(index, "width", v)
                    }
                }
            },
            setV(index, name, v) {
                this.insideValue[index][name] = v
                this.update()
            },
            moveLeft(index) {
                let cur = this.insideValue.splice(index, 1)
                this.insideValue.unshift(cur[0])
                this.update()
            },
            moveRight(index) {
                let cur = this.insideValue.splice(index, 1)
                this.insideValue.push(cur[0])
                this.update()
            },
            update() {
                let v = []
                for (let index in this.insideValue) {
                    let item = this.insideValue[index]
                    if (item.show) {
                        v.push(item)
                    }
                }

                this.$emit("change", Math.random(), v)
                //保存缓存
                this.$utils.setLocData(this.cacheKey,this.insideValue)
            },
            clearCache(){
                this.$utils.clearLocData(this.cacheKey)
                this.update()
            },
            restData(){
                this.insideValue = this.org
                this.update()
            }
        },
        mounted() {
            for (let item of this.org) {
                if (item.show === undefined){
                    item.show = true
                }
                if (item.type === "selection") {
                    item.title = "选择"
                }
                this.insideValue.push(item)
            }
            if (this.cached){
                let cacheData = this.$utils.getLocData(this.cacheKey)
                if (cacheData !== null){
                    this.insideValue = cacheData
                }
            }
            this.update()
        },
        watch: {}
    }
</script>

<style scoped>

</style>